<template>
    <div class="search-popup">
      <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeholderVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
      
      <!-- 弹出层中，会展示三种页面中的一种，可以写成三个组件 -->        
      <!-- 使用组件 -->
      <HistoryHot 
      v-if="blockShow==1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
      ></HistoryHot>
      <SearchTipslist 
      v-else-if="blockShow==2"
      :searchTipsList="searchTipsList"
      @tagClick="tagClick"
      ></SearchTipslist>
      <SearchProducts 
      v-else-if="blockShow==3"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @categoryChangeSearch="categoryChangeSearch"
      @priceChangeSearch="priceChangeSearch"
      ></SearchProducts>
    </div>
</template>

<script>
    // 引入组件
    import HistoryHot from"../components/searchPopup/HistoryHot.vue"
    import SearchTipslist from"../components/searchPopup/SearchTipslist.vue"
    import SearchProducts from"../components/searchPopup/SearchProducts.vue"
    // 引入接口
    import {GetSearchPopupData, GetSearchTipsListData, GetSearchData} from "../request/api.js"
    export default {
        // 注册组件
        components:{
            HistoryHot,SearchTipslist,SearchProducts
        },
        data () {
            return{
                //搜索框的v-model值
                searchVal:"",
                //搜索框的placeholder值
                placeholderVal:"",
                // blockShow用来决定将来弹出层展示的是哪个页面
                //blockShow为1 则表示 展示历史和热门页面
                //blockShow为2 则表示 展示提示列表页面
                //blockShow为3 则表示 展示商品列表页面
                blockShow:1,
                // 历史记录数组
                historyKeywordList:[],
                // 热门搜索数组
                hotKeywordList:[],
                //搜索提示数组
                searchTipsList:[],
                //搜索产品的列表数组
                goodsList:[],
                //搜索产品时候的分类数组
                filterCategory:[],
                // 以下3个变量都是搜索时候带的参数
                //价格由高到低(desc)或者由高到低(asc)排序
                order:"desc",
                //分类id
                categoryId:0,
                //排序的方式,可以是id或price
                sort:"id"
            }
        },
        created() {
            //发送请求，请求搜索页的数据(历史记录、热门搜索) 
            // 等到滑动的动画结束之后，再执行请求,加载提示的位置就不会乱
            setTimeout(()=>{
                GetSearchPopupData().then(res=>{
                   // console.log(res);
                   this.placeholderVal = res.data.defaultKeyword.keyword
                   // 解构数组
                   let {historyKeywordList, hotKeywordList} = res.data
                   // console.log(historyKeywordList, hotKeywordList); 
                   this.historyKeywordList = historyKeywordList;
                   this.hotKeywordList = hotKeywordList;
                })
            },400)
        },
        methods: {
            tagClick(val){
                this.searchVal = val
                this.onSearch(this.searchVal)
            },
            // SearchProducts的排序改变
            priceChangeSearch(value){
                this.sort = "price"
                this.order = value
                this.onSearch(this.searchVal)
            },
            // SearchProducts的分类改变
            categoryChangeSearch(id){
                this.categoryId = id
                this.onSearch(this.searchVal)
            },
            onInput(value) {
                //把界面改成2
                this.blockShow = 2
                console.log(value)//用户输入的信息
                // 发起请求，请求输入的提示列表的数据
                GetSearchTipsListData({
                    //用户输入的信息
                    keyword:value
                }).then(res=>{
                    console.log(res)
                    this.searchTipsList = res.data
                })
            },
            onSearch(value) {
              //把界面改成3
              this.blockShow = 3
              //发送搜索商品请求
              GetSearchData({
                  //用户输入的信息
                  keyword:value,
                  //显示页数
                  page:1,
                  //每页显示条数
                  size:20,
                  //价格由高到低(desc)或者由高到低(asc)排序
                  order:this.order,
                  //分类id
                  categoryId:this.categoryId,
                  //排序的方式,可以是id或price
                  sort:this.sort
              }).then(res=>{
                  console.log(res)
                  let {goodsList,filterCategory} = res.data
                  this.goodsList = goodsList
                  // 对filterCategory数据进行加工处理
                  // [{id: 0, name: "全部", checked: true}, {id: 1005000, name: "居家", checked: false}]
                  // 处理成:
                  // [{ text: '全部', value: 0 },{ text: '居家', value: 1005000 }],
                  // 修改某个数组中一个或多个对象的属性名
                  let newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
                  this.filterCategory = newArr
              })
            },
            onCancel() {
              this.$router.go(-1);
            },
            
        },
    }
</script>

<style lang="less" scoped>
    .search-popup{
        background-color: #efefef;
        position: absolute;
        width: 100%;
        height: 100%;
        // right: 0;
        top: 0;
        z-index: 9;
    }
</style>
